<template>
  <footer>
    <div class="container">
      <div class="footer_top row">
        <div class="col-md-3">
          <i class="iconfont icon-pinzhibaozheng"></i>
          <span>官方品质保证</span>
        </div>
        <div class="col-md-3">
          <i class="iconfont icon-tubiaozhizuomoban"></i>
          <span>7天无理由退货</span>
        </div>
        <div class="col-md-3">
          <i class="iconfont icon-baoyou"></i>
          <span>全场满99包邮</span>
        </div>
        <div class="col-md-3">
          <i class="iconfont icon-wangdianguanli"></i>
          <span>售后网点 全国覆盖</span>
        </div>
      </div>
      <div class="footer_links row">
        <div class="main_info">
          <div class="fl">
            <dl>
              <dt>购物相关</dt>
              <dd>
                <a href="javascript:void(0)">购物指南</a>
              </dd>
              <dd>
                <a href="javascript:void(0)">支付方式</a>
              </dd>
              <dd>
                <a href="javascript:void(0)">配送方式</a>
              </dd>
            </dl>
            <dl>
              <dt>售后支持</dt>
              <dd>
                <a href="javascript:void(0)">售后服务政策</a>
              </dd>
              <dd>
                <a href="javascript:void(0)">退换货政策</a>
              </dd>
              <dd>
                <a href="javascript:void(0)">常见问题</a>
              </dd>
            </dl>
            <dl>
              <dt>关注我们</dt>
              <dd>
                <a href="javascript:void(0)">新浪微博</a>
              </dd>
              <dd>
                <a href="javascript:void(0)">会员制度</a>
              </dd>
              <dd>
                <a href="javascript:void(0)">加入我们</a>
              </dd>
              <dd>
                <a href="javascript:void(0)">廉洁监督</a>
              </dd>
            </dl>
            <dl>
              <dt>关于我们</dt>
              <dd>
                <a href="javascript:void(0)">关于科沃斯</a>
              </dd>
              <dd>
                <a href="javascript:void(0)">社会责任</a>
              </dd>
              <dd>
                <a href="javascript:void(0)">联系我们</a>
              </dd>
            </dl>
          </div>
          <div class="fr">
            <div class="qrcode">
              <img :src="imgList.qrcode1" alt="" />
            </div>
            <div class="contact">
              <h5>400-886-8888</h5>
              <span>周一至周日 9:00-20:00 </span>
              <button>
                <img :src="imgList.consult" alt="" />
                在线客服
              </button>
            </div>
          </div>
        </div>
        <div class="copyright row">
          <span>
            Copyright ©2014-2021 科沃斯机器人版权所有
            <a href="javascript:void(0)">苏ICP备14049145号-1</a>
            &nbsp;&nbsp;ICP证：苏B1-20140152&nbsp;&nbsp;
            <a href="javascript:void(0)">营业执照</a>
            <img :src="imgList.szicbok" alt="" />
          </span>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      imgList: {
        qrcode1: require("../assets/image/login/700000001.png"),
        consult: require("../assets/image/login/ia_700000014.png"),
        szicbok: require("../assets/image/login/szicbok.gif"),
      },
    };
  },
};
</script>

<style lang="scss">
footer {
  padding-top: 10px;
  background-color: #fff;

  .container {
    width: 1220px;
    margin: 0 auto;

    .footer_top {
      display: flex;
      justify-content: space-between;
      padding: 30px 0;
      border-bottom: 1px solid #f5f5f5;

      .col-md-3 {
        display: flex;
        align-items: center;

        .iconfont {
          margin-left: 25px;
          font-size: 45px;
        }

        span {
          font-size: 16px;
          color: #616161;
          margin-left: 10px;
        }
      }
    }

    .footer_links {
      padding: 35px 0;

      .main_info {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        padding-bottom: 35px;

        .fl {
          // float: left;
          display: flex;

          dl {
            float: left;
            width: 161px;
            margin-bottom: 0;

            dt {
              font-size: 14px;
              color: #3a3a3a;
              padding-bottom: 15px;
              font-weight: 400;
            }

            dd {
              margin-inline-start: 0;
              padding-bottom: 5px;

              a {
                font-size: 12px;
                color: #757575;
                text-decoration: none;
              }
            }
          }
        }

        .fr {
          // float      : right;
          width: 576px;
          border-left: 1px solid #f5f5f5;

          .qrcode {
            float: left;
            padding-left: 90px;

            img {
              display: block;
            }
          }

          .contact {
            float: right;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            h5 {
              font-size: 23px;
              color: #ee0a3b;
              width: 153px;
              height: 33px;
              line-height: 33px;
              margin: 0;
            }

            span {
              font-size: 12px;
              color: #757575;
              width: 153px;
              text-align: left;
            }

            button {
              margin-top: 15px;
              font-weight: 400;
              font-size: 12px;
              background-color: #fff;
              color: #ee0a3b;
              border: 1px solid #ee0a3b;
              padding: 0;
              width: 153px;
              height: 28px;
              line-height: 28px;
              display: flex;
              align-items: center;
              justify-content: center;

              &:hover {
                background-color: #ee0a3b;
                color: #fff;
              }

              img {
                display: inline-block;
                width: 20px;
                height: 18px;
                margin-right: 10px;
                vertical-align: middle;
              }
            }
          }
        }
      }

      .copyright {
        span {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          color: #a0a0a0;

          img {
            margin-left: 10px;
            width: 30px;
            height: 38.36px;
          }

          a {
            font-size: 12px;
            color: #757575;
            text-decoration: none;

            &:hover {
              color: #ee0a3b;
            }
          }
        }
      }
    }
  }
}
</style>